<template lang="html">
  <section class="components-course_detail-coach_info" v-if="courseDetail !== null">
    <div class="part_one">
      <div class="home_icon">
        <i class="ic-home" @click="goToCoachDetail"></i>
      </div>
      <div class="teacher">
        <div class="teacher_head" @click="goToCoachDetail">
          <progressive-img :src="courseDetail.coachAvatar" />
          <!-- <img :src="_PREFIX_ + 'zp-test-banner-8.jpg'" alt=""/> -->
        </div>
        <div class="teacher_name">
          <h1>{{courseDetail.coachName}}</h1>
          <!-- <h1>{{info.coach.nickname}}</h1> -->
        </div>
      </div>
      <div class="intro">
        <p>{{!isFull ? courseDetail.description.slice(0, 50): courseDetail.description}}</p>
      </div>
      <div class="circle_list">
        <i class="ic-category-more" @click="isFull = false" v-show="isFull"></i>
        <i class="ic-more" @click="isFull = true" v-show="!isFull"></i>
      </div>
    </div>
    <div class="part_two">
      <p>
        <span>Order Amount:</span>
        <span>¥ <span class="now_price">{{courseDetail.currentPrice}}</span> RMB</span>
        <span class="ago_price"><div></div>{{courseDetail.originalPrice}} RMB</span>
      </p>
      <p>
        <span>Time:</span>
        <span>{{courseDetail.showDate}}|{{courseDetail.showWeek}} {{courseDetail.timeLimit}}</span>
      </p>
      <p>
        <span>Location:</span>
        <span @click="openLocation()">{{`${courseDetail.city}·${courseDetail.area}·${courseDetail.address}`}} <i class="ic-location"></i> </span>
      </p>
    </div>
  </section>
</template>

<script>
import utils from '@/lib/utils'
export default {
  props: {
    courseDetail: {
      type: Object
    }
  },
  data(){
    return {
      isFull: false,
    }
  },
  methods: {
    openLocation(){
      let self = this
      if(utils.os('weixin') && this.courtDetail !== null){
        this.$store.dispatch('wxLocation', {
          latitude: self.courseDetail.location.latitude,
          longitude: self.courseDetail.location.longitude,
          name: self.courseDetail.address
        })
      }
    },
    goToCoachDetail(){
      this.$router.push({ path: `/coach/${this.courseDetail.coachId}` })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../css/config";
.components-course_detail-coach_info{
  position: relative;
  width: 691px;
  box-sizing: border-box;
  padding: 25px 47px 37px 64px ;
  background: #fff;
  border-radius: 15px;
  margin: -61px auto 0;
  z-index: 1;
  box-shadow: 0px 4px 15px 0px rgba(8, 1, 3, 0.3);
  .part_one{
    overflow: hidden;
    /*height: 250px;*/
    width: 100%;
    .home_icon{
      height: 36px;
      width: 100%;
      .ic-home{
        float: right;
        font-size: 45px;
        color: $common-red;
      }
    }
    .teacher{
      float: left;
      width: 119px;
      .teacher_head{
        height: 115px;
        width: 115px;
        border-radius: 100%;
        border: 2px solid #000;
        line-height: 115px;
        transform: rotate(0);
        overflow: hidden;
        img{
          height: 100%;
          // width: 100%;
          // display: inline-block;
          // vertical-align: middle;
        }
      }
      .teacher_name{
        width: 100%;
        text-align: center;
        margin-top: 13px;
        h1{
          font-size: 25px;
          line-height: 33.33px;
          color: #000;
        }
      }
    }

    .intro{
      width: 380px;
      float: right;
      margin: 22px 0 0 75px ;
      p{
        font-size: 20.83px;
        line-height: 33.33px;
      }
    }
    .circle_list{
      float: left;
      width: 100%;
      text-align: center;
      .ic-more{
        display: block;
        float: right;
        margin-right: 10px;
        font-size: 30px;
        color: #000;
      }
      .ic-category-more{
        display: inline-block;
        font-size: 18px;
        margin-bottom: 10px;
        color: #000;
        transform: rotate(180deg) scale(0.6);
      }
    }
  }
  .part_two{
    border-top: 2px solid  #c2c2c2;
    padding-top: 14px;
    p{
      font-size: 25px;
      line-height: 1.2;
      margin-top: 17px;
      color: #3d3d3d;
      span:nth-child(1){
        font-weight: bolder;
      }
      .ic-location{
        padding-left: 10px;
        vertical-align: middle;
        font-size: 35px;
        color: $common-red;
      }
    }
    .now_price{
      color:#f0582f;
    }
    .ago_price{
      margin-left: 35px;
      color:#a6a6a6 ;
      position: relative;
      display: inline-block;

      div{
        position: absolute;
        left: -5px;
        width: 115px;
        height: 50%;
        border-bottom: 2px solid #f0582f;
      }
    }
  }
}
</style>
